<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <!--22测试lin 1111周五测试dev分支<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
 
    <title> </title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/social-share.js/1.0.16/css/share.min.css" charset="UTF-8">
</head>

<body>
    <style>
      .Body_conents{
         width: 100%;
         position: relative;
      }
      .Body_conents img{
               width:100%;
 

      }
      .Conte{
          position: absolute;
          top:59.5%;
          left:15%
      }
     
      .con_MA{
        width: 30.2vw;
        height: 11.2vw;
        background: #FFB345;
        line-height: 11.2vw;
        color: #951F1F;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        margin-left: 5vw;
        border-radius: 6vw;
        /* background: linear-gradient(180deg, #FFCA1C 0%, #FFB345 100%); */
        /* box-shadow: 0px 4px 2px 0px rgba(255, 253, 245, 0.5), 0px -3px 3px 0px rgba(201, 90, 0, 0.5); */
        border-radius:6.6vw;
        border: none;
        outline :none;
        box-shadow: 0px 1px 2px 2px #FFB345;
        
      }
      .Conte_two{
        position: absolute;
 
         top:66.5%;
         left:15%
      }
      .Usert{
          width:35vw;
         border: 0px;
         outline:none;
         cursor: pointer;
         height: 7vw

      }
      .Body_conents .Fu{
        width: 70.2vw;
      height: 6.6vw;
      font-size: 4vw;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #951F1F;
      line-height: 6.6vw;
      position: absolute;
      top: 21vw;
      /* margin: 0 auto; */
      /* left: 24vw; */
      text-align: center;
      }
      .agree{
        position: absolute;
        top: -36vw;
        left: 33vw;
      }
      .Tab{
        position: absolute;
        top: 24%;
        left: 12%;
        width: 32vw;
        flex-flow: row;
        justify-content: space-around;
        display: flex;
      }
      .People{
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #C6360D;
        line-height: 33px;
        margin-top: 2vw;
      }
      .con_key{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #AF8637;
        position: absolute;
        left: 13%;
        top: 22%;
      }
      .Money{
          position:absolute; 
          right: 13%;
          top: 22%;
        
      }
    .num{
        font-size: 6.4vw;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #DF5B0F;
        line-height: 8.8vw;
    }
    .Price{
        font-size:3.2vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        padding-left: 2vw;
    }
    .Quert{
        margin-top: 3vw;
        color:#C6360D;
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 3.2vw;
        display: none;
    }
    .Uname{
     position: absolute; top: -9vw;
     font-size: 3.2vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .fatent{
      font-size: 3.2vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #E31D1A;
      margin-top: 1.0vw;
     display: none;
    }
    .Agree_t{
      font-size: 3.2vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
     .agree img{
        width:3.9vw;
        position: absolute;
        top: 1vw;
        left: -5vw; 
       
     }
     .tab_img{
      display: none; 
     }

    </style>
    
    <div class="Body_conents">
          <div class="con_key"> 注册即得</div>
          <div  class="Tab">
              
            
                <div class="People">新人大礼包</div>
             
              
          </div>
          <!-- <div>
            <div>+10 <span>222</span>></div>
            <div>价值10元</div>
          </div> -->
          <div class="Money">
            <div class="num">+10 <img src="../img/icon_niu.png" alt="" style="width:5.8vw;height:8vw"></div>
            <div class="Price">价值10元</div>
          
          </div>
         <img src="../img/icon_login.png" alt="">
         
         <div class="Conte">
            <div class="Uname" >邀请人:<span id="Name_n"></span></div>
            <input id="phone" οnkeyup="isPhoneNo" type="text" name="phone" maxlength="11"  style="border: 0px;outline:none;cursor: pointer;height: 7vw" placeholder="请输入手机号" onkeyup="this.value=this.value.replace(/\D/g,'')" >
            <div class="Quert">*请输入正确的手机号</div>
          
         </div>
         <div class="Conte_two">
            <input id="Verification" type="text" name="phone"  class="Usert" maxlength="6"  placeholder="输入验证码" >
            <button class="con_MA" id="on_sell">点击获取</button>
            <div class="fatent" id="Who_user">验证码错误</div>
            <div class="Fu" id="welfare" disabled="true" >领取福利</div>
          
       </div>
       <div style="position: relative;">
        <div class="agree" id="agree">
            <!-- <input  type="checkbox"  id="signedAgreement" value="1" onchange="is_xuanzhong()"> -->
            <img src="../img/check-circle-fill 2.png" alt=""  id="signedAgreement"  class="circle" onclick="checkclick()">
            <img src="../img/check-circle-fill.png" alt=""  class="tab_img">
            <!-- <span style="color: red;display:none;font-size: 3.1vw;" id="yuedudagou">请选</span> -->
            <span class="Agree_t"> <span style="color: red;display:none;font-size: 3.2vw;" id="yuedudagou">请选</span>阅读并同意<span style="color:red">《用户协议》</span></span><br>
          
        </div>
    </div>
        

    </div>

<script src="../js/jquery.js.js"></script>
<script src="../js/share.min.js"></script>
<script src="../js/md5.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 <script>
    //测试
    var apiUrl =  'https://test6.douniu8.com'
    //线上
    // var apiUrl =  'https://api.douniu8.com'
   //点击图片
  var is_check = 1;
   function checkclick(){
        if(is_check == 2){
            console.log("111111");
            $("#signedAgreement").attr("src", "../img/check-circle-fill 2.png");
            $("#yuedudagou").show();
            is_check = 1;
        } else{
            console.log("22222");
            $("#signedAgreement").attr("src", "../img/check-circle-fill.png");
            $("#yuedudagou").hide();
            is_check = 2;
        }
   
   }
 
   //解决ios输入自动放大
    // 当页面加载完成后触发该函数
    window.onload = function () {

// e.preventDefault()  ===    阻止默认事件

// 当一个手指放在屏幕上时，会触发 touchstart 事件。如 果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件
document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

// 在单个元素上单击两次 ===  dblclick
document.addEventListener('dblclick', function (e) {
    e.preventDefault();
});

// 一个手指放在屏幕上时，会触发 touchstart 事件
document.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
});

// 如果一个或两个手指在屏幕上滑动，将会触发 gesturechange 事件。
// 但只要有一个手指移开， 就会触发 gestureend 事件，紧接着又会触发基于该手指的 touchend 事件。
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    // 如果在300ms内触发两次touchend，就阻止默认事件
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);
};

     $(function(){
       //从detail.html获取分享出来的url
        var url =  window.location.href;
        inviteCode =  request('inviteCode'); //使用下面方法截取浏览器地址
        // alert(inviteCode)
        //  alert(url)
        // alert('截取到的code'+inviteCode)
        //获取用户名称截取
        if(inviteCode != ""){
        $.ajax({
              type:'post',
              url:apiUrl+'/unauth/inviteCode/getUdNickname/'+inviteCode,
              contentType:'application/json' ,
              data:JSON.stringify({
                inviteCode:inviteCode,
          }),
         success:function(res){
          udNickname =res.data.udNickname
          $("#Name_n").text(udNickname)
          console.log(res.data.udNickname+"llloo")
         }
      
      
       })
        }
    
     });
     
    
  ///获取url中指定参数截取
       function request(paras) {
        //  console.log('1111'+paras)
            var url = location.href;
            // console.log('222222'+url)
            var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
            // console.log('00000'+paraString)
            var paraObj = {}
            for (i = 0; j = paraString[i]; i++) {
                paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
            }
            var returnValue = paraObj[paras.toLowerCase()];
            // console.log(['333333333'+returnValue])
            if (typeof (returnValue) == "undefined") {
                return "";
            } else {
                return returnValue;
            }
        }

  
          //校验只能输入数字
      $('#phone').keyup (function(){
          var _this = $(this);
              console.log(22)
        var pattern = /^1[345678]\d{9}$/; 
        phone =$(this).val()
        if(pattern.test(phone)){

            _this.next().hide()
        }else{
            
        _this.next().show()
        }

        return 
      });

  $("#Verification").keyup(function () {
  //如果输入非数字，则替换为''，如果输入数字，则在每4位之后添加一个空格分隔
    this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1");
    //这个 value_two=$(this).val()
    // console.log(value_two+"---ppp") 

  })

  

  //请求验证码接口
  $('#on_sell').click(function(){
    var phone = $("#phone").val();
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    if (!myreg.test(phone)) {
      $('.Quert').show();
      return false;
    } else {
      $('.Quert').hide();
    } 
    $("#on_sell").css('background', '#A2A2A2','color','#FFFFFF')
    $("#on_sell").css('color','#FFFFFF')
    $("#on_sell").css('box-shadow','none')
    
  console.log(phone)
  $.ajax({
    type:'post',
   url:apiUrl+'/unauth/inviteCode/getcode/'+phone,
   contentType:'application/json' ,
   data:JSON.stringify({
     phone:phone,
   }),
   success:function(res){
     if(res.code == 200){
        $('.Quert').hide();
        send()
     }else{
      alert(res.message);
     }

   }
    
   
 })
})

var validCode=true;
function send(){
  var time=60;
  

      if (validCode) {
        $("#on_sell").attr('disabled',true);
        $("#on_sell").css('background','#999999')
        $("#on_sell").css('box-shadow','none')
        $("#on_sell").css('color','#ffffff')
        var t=setInterval(function () {
          time--;
          $("#on_sell").html(time+"秒");
          console.log(time);
          if (time==0) {
            clearInterval(t);
            $("#on_sell").html("重新获取");
            $("#on_sell").css('background','#FFB345')
            $("#on_sell").css('box-shadow','0px 1px 2px 2px #FFB345')
            $("#on_sell").css('color','white')
            $("#on_sell").attr('disabled',false);
            validCode=true;
            $("#on_sell").removeClass("msgs1");
          }
        },1000)
      }
}


//点击获取福利按钮
// if($(this).val() == "" || phone == undefined || phone == null){
 $('#welfare').click(function(){
  
  var value_two = $("#Verification").val();
  console.log(value_two+'ppppll')
  var phone = $("#phone").val();
  var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    if (!myreg.test(phone)) {
      $('.Quert').show();
      return false;
    } else {
      $('.Quert').hide();
    } 
  if(!value_two || value_two == ""){
      alert("请输入验证码");
      return false;
    }
  if(is_check == 1){
      // 进行拦截校验
		$("#yuedudagou").show();
    return false;
	}
     
     //请求登录接口
      $.ajax({
          type:'post',
          url:apiUrl+"/unauth/inviteCode/registerAndLogin",
          header:{
            contentType:'application/x-www-form-urlencoded;charset=utf-8'},
          data:{
            phone:phone,
            checkcode:value_two,
            code:inviteCode,
      
         },
   success:function(res){
    // $('#Who_user').show()
      console.log(typeof(res))
      
        
      if(res.code == 200){
        
              sessionStorage.setItem('token',res.data.token)
              location.href = "./detail.html"
              $('#Who_user').hide()
              console.log("成功")
         }else{
             $('#Who_user').show()
      
      } 
    
        
   
    
     
    
    },
   
    
      
      })
  
 
 })

  
 

 
 </script>  
</body>

</html>